<%@ page import="com.cai.pojo.DetailedUser" %><%--
  Created by IntelliJ IDEA.
  User: RuoLi
  Date: 2023/1/3
  Time: 15:10
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>个人中心</title>
    <!-- import CSS -->
    <link rel="stylesheet" href="<%=request.getContextPath()%>/css/index.css">
    <!-- import Vue before Element -->
    <script src="<%=request.getContextPath()%>/js/vue.js"></script>
    <!-- import JavaScript -->
    <script src="<%=request.getContextPath()%>/js/element-ui.js"></script>
    <!-- axios -->
    <script src="<%=request.getContextPath()%>/js/axios.js"></script>
    <%--icon--%>
    <link rel="stylesheet" href="<%=request.getContextPath()%>/css/fonts/element-icons.ttf">
    <link rel="stylesheet" href="<%=request.getContextPath()%>/css/fonts/element-icons.woff">
</head>
<body>
<div id="app">
    <el-page-header @back="goBack" content="个人主页"></el-page-header>
    <el-divider></el-divider>
    <el-descriptions  v-loading="loading" v-for="item in lists" title="用户信息" class="margin-top" border :column="3">
        <el-descriptions-item label="用户名">{{item.user_nickname}}</el-descriptions-item>
        <el-descriptions-item label="账号">{{item.user_account}}</el-descriptions-item>
        <el-descriptions-item>
            <template slot="label">
                <i class="el-icon-mobile-phone"></i>
                手机号
            </template>
            {{item.user_phone}}
        </el-descriptions-item>
        <el-descriptions-item>
            <template slot="label">
                <i class="el-icon-office-building"></i>
                居住地
            </template>
            {{item.user_address}}
        </el-descriptions-item>
        <el-descriptions-item>
            <template slot="label">
                <i class="el-icon-message"></i>
                邮箱
            </template>
            {{item.user_email}}
        </el-descriptions-item>
        <el-descriptions-item>
            <template slot="label">
                <i class="el-icon-user"></i>
                身份
            </template>
            <el-tag size>管理员</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="备注">
            <template slot="label">
                <i class="el-icon-tickets"></i>
                备注
            </template>
            {{item.user_remark}}
        </el-descriptions-item>
    </el-descriptions>
    <el-descriptions border :column="4"  v-loading="loading" v-for="item in lists">
        <el-descriptions-item>
            <template slot="label">
                答题数量
            </template>
            {{item.user_question_numbers}}
        </el-descriptions-item>
        <el-descriptions-item>
            <template slot="label">
                正确数量
            </template>
            {{item.user_question_true}}
        </el-descriptions-item>
        <el-descriptions-item>
            <template slot="label">
                错误数量
            </template>
            {{item.user_question_errors}}
        </el-descriptions-item>
        <el-descriptions-item>
            <template slot="label">
                正确率
            </template>
            {{item.user_question_rate}}%
        </el-descriptions-item>
    </el-descriptions>
</div>
</body>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                lists: [],
                loading: true,
            }
        },
        methods: {
            goBack() {
                window.location.href = "index_admin.jsp"
            },
        },
        created() {
            axios.get('/online_website/admin/DetailedInfo').then((res) => {
                this.lists = res.data;
            });
            this.loading=false;
        },
        computed: {
            activeIndex: {
                get: function () {
                    return this.$store.getters.activeMenu;
                },
                set: function () {},
            },
        },
    })
</script>
</html>
